<template>
  <div id="detailDialog">
    <el-dialog
      title="被投诉内容"
      :visible.sync="detailDialogData.isShow"
      width="700px"
    >
      <div v-loading="loading" class="task-detail-con">
        <div class="detail-left">
          <img :src="formData.avatar" alt="头像" />
        </div>
        <div class="detail-right">
          <dl>
            <dt>
              {{ formData.nickName }}
              <template>
                <strong class="detail-top">{{
                  formData.categoryId | filterName('collegeType')
                }}</strong>
                <strong class="detail-top">{{
                  getLevel(formData.score)
                }}</strong>
                <strong class="detail-top">{{
                  formData.courseGrade === 'OTHER' ||
                  formData.courseGrade === ''
                    ? '其他'
                    : formData.courseGrade
                }}</strong>
              </template>
            </dt>
            <dd>
              <span>{{ formData.dpAccount }}</span>
              <span>创建时间：{{ formData.jobSubmitTime }}</span>
              <span v-if="formData.approvedTime"
                >批改时间：{{ formData.approvedTime }}</span
              >
            </dd>
            <dd>
              <span v-html="formData.jobContent"></span>
            </dd>
            <template>
              <dd>
                <i class="el-icon-link"></i>
                {{ formData.taskName }}
              </dd>
              <dd class="as-code-number">
                作业码：{{ formData.identificationCode }}
              </dd>
            </template>
          </dl>
          <div v-if="showType === 'VIDEO'" class="video-face-box">
            <videoFace :vid="vid"></videoFace>
          </div>
          <div
            v-else
            class="pic-box-show"
            :class="imgList.length > 1 ? '' : 'single-pic'"
          >
            <showImg v-if="imgList.length > 0" :img-list="imgList"></showImg>
          </div>
          <ul class="foot-list">
            <li>评论 {{ formData.commentCount }}</li>
            <li>点赞 {{ formData.likeCount }}</li>
            <li>分享{{ formData.shareAmount }}</li>
            <li>最新编辑者 {{ formData.newOperName || '-' }}</li>
          </ul>
        </div>
      </div>
      <div class="button-group">
        <el-button
          v-if="formData.doubt"
          type="danger"
          size="medium"
          @click="cancelDoubt"
        >
          取消"疑"
        </el-button>
        <el-button v-else type="success" size="medium" @click="tagDoubt">
          标注"疑"
        </el-button>
        <el-button type="default" size="medium" @click="cancel">
          取消
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import videoFace from '@common/videoFace'
import showImg from '@common/showImg'
import { sysNormalDisable } from '@utils/dictionariesFunc'
import {
  getDetailRequest,
  tagDoubtRequest,
  cancelDoubtRequest
} from '@/api/jobComplain/jobComplainAPI'
import { async } from 'q'
export default {
  components: {
    videoFace,
    showImg
  },
  props: ['detailDialogData'],
  data() {
    return {
      id: '',
      loading: false,
      showType: '', // 显示类型，作品内类-图文 【TEXT】 小视频【VIDEO】
      formData: {},
      vid: '',
      imgList: [],
      collegeList: [],
      that: this
    }
  },
  mounted() {
    this.getDetail()
    this.getCollege()
  },
  methods: {
    /* 获取详情 */
    getDetail() {
      let params = {
        isDel: this.detailDialogData.isDel,
        dpAccount: this.detailDialogData.dpAccount
      }
      getDetailRequest(
        this.detailDialogData.jobcompletionId,
        params,
        (response) => {
          this.formData = response
          this.showType = this.formData.jobType
          if (this.showType === 'TEXT') {
            this.getImgList(this.formData.imgInfo)
          } else {
            this.vid = this.formData.vid
          }
        },
        (response) => {
          this.$message({
            message: response.message,
            type: 'warning'
          })
        }
      )
    },
    /* 获取图片列表 */
    getImgList(ary) {
      let empty = []
      ary.forEach((item) => {
        empty.push(item.url)
      })
      this.imgList = [...empty]
    },
    async getCollege() {
      let collegeList = await sysNormalDisable('sys_college', 'collegeType')
      this.collegeList = collegeList
    },
    // 点击取消
    cancel() {
      this.detailDialogData.isShow = false
    },
    // 标注疑
    tagDoubt() {
      this.$confirm(
        '标注“疑”后，在作者的“我的作业”列表中，该条动态会标注“疑”图标；确认给该条动态标注“疑”？',
        '系统提示',
        {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning'
        }
      )
        .then(() => {
          tagDoubtRequest(this.detailDialogData.copyComplainId, (response) => {
            this.$message({
              type: 'success',
              message: '已标注疑!'
            })
            this.getDetail()
          })
        })
        .catch(() => {})
    },
    // 取消疑
    cancelDoubt() {
      this.$confirm('确认取消“疑”？', '系统提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          cancelDoubtRequest(
            this.detailDialogData.copyComplainId,
            (response) => {
              this.$message({
                type: 'success',
                message: '已取消标注疑!'
              })
              this.getDetail()
            }
          )
        })
        .catch(() => {})
    }
  },
  computed: {
    getLevel() {
      return function(score) {
        switch (score) {
          case '90':
            return '优'
            break
          case '80':
            return '良'
            break
          case '70':
            return '中'
            break
          case '60':
            return '差'
            break
          case '0':
            return '未打分'
            break
        }
      }
    }
  }
}
</script>

<style lang="less" scoped>
#detailDialog {
  .task-detail-con {
    display: table;
    color: #333;
    margin: 0 20px;
    .detail-left,
    .detail-right {
      display: table-cell;
      .detail-top {
        font-weight: 400;
        border: 1px solid #ccc;
        padding: 2px 5px;
        margin: 0 5px;
        border-radius: 2px;
      }
      .as-code-number {
        color: #ccc;
      }
    }

    .detail-left {
      width: 80px;
      vertical-align: top;

      img {
        width: 50px;
        height: 50px;
        border-radius: 50%;
      }
    }

    .detail-right {
      .pic-box-show {
        width: 504px;
        height: 300px;

        &.single-pic {
          height: 200px;
        }
      }
      .video-face-box {
        width: 504px;
        height: 380px;
      }
      dl {
        margin-bottom: 20px;

        dt {
          font-size: 15px;
          line-height: 30px;
          margin-bottom: 10px;
          font-weight: bold;
        }

        dd {
          font-size: 14px;
          line-height: 22px;
          margin-bottom: 8px;

          &:nth-of-type(1) {
            span {
              margin-right: 7px;
              display: inline-block;
            }
          }
        }
      }

      ul.foot-list {
        padding: 20px 0 15px;
        overflow: hidden;

        li {
          float: left;
          margin-right: 20px;
        }
      }
    }
  }
  .button-group {
    padding-bottom: 30px;
    padding-right: 40px;
    text-align: right;
  }
}
</style>
